<template>
  <div class="common-layout">
    <el-container>
      <el-header height="130px" class="head">
        <div class="time">
          {{ month }}月&nbsp;{{ date }}日&nbsp;{{ hour }}时&nbsp;{{ minute }}分&nbsp;{{ second }}秒
          <div class="huanyin">欢迎您登录系统</div>
        </div>
        <div class="big">
          <div class="one">
            <p>1589</p>
            <span>合作企业</span>
          </div>
          <div class="two">
            <p>952</p>
            <span>在售商品</span>
          </div>
          <div class="three">
            <p>1751</p>
            <span>订单数量</span>
          </div>
          <div class="four">
            <p>124</p>
            <span>取消订单</span>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="800px">
          <div ref="main" style="width: 800px; height: 600px"></div
        ></el-aside>
        <el-main>
          <!-- <p>待办数据</p> -->
          <!-- <el-form-item label="" :data="ab" >
            <span prop="title"></span>
          </el-form-item> -->
          <el-table :data="tableData" height="550" style="width: 100%">
            <el-table-column prop="title" label="待办数据" />
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { customerApi, todoslistApi } from "@/apis/home";
// import { log } from 'console';

export default {
  data() {
    return {
      name: "",
      region: "",
      type: "",
      month: 0,
      date: 0,
      hour: 0,
      minute: 0,
      second: 0,
      ab: [],
      tableData: [],
    };
  },
  created() {
    this.todoslist();
    this.tjfx();
  },
  mounted() {
    const myChart = echarts.init(this.$refs.main);
    myChart.setOption({
      title: {
        text: "统计分析",
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["订单数", "客户质量"],
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["新疆", "甘肃", "北京", "上海", "河北", "辽宁", "江苏"],
      },
      yAxis: {
        type: "value",
        name: "订单数",
        min: 0,
        max: 21000,
        position: "left",
        axisLabel: {
          formatter: "{value}",
        },
      },
      series: [
        {
          name: "订单数",
          type: "line",
          stack: "Total",
          data: [1061, 1045, 1498, 1368, 1266, 1259, 1629],
        },
        {
          name: "客户质量",
          type: "line",
          stack: "Total",
          data: [12445, 18200, 19100, 16345, 17832, 12345, 15325],
        },
      ],
    });
    // 显示时间
    setInterval(()=>{
      this.month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
      this.date = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
      this.hour = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
      this.minute = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      this.second = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
    },1000)
  },
  methods: {
    
    // 统计信息
    async tjfx() {
      try {
        const res = await customerApi();
        if (res.code === 200) {
          // console.log(res.data);
        }
      } catch (err) {
        console.log(err);
      }
    },
    // 待办事项
    async todoslist() {
      try {
        const res = await todoslistApi();
        if (res.code === 200) {
          this.tableData = res.data;
        }
      } catch (err) {
        console.log(err);
      }
    },
  },
};

</script>

<style lang="less" scoped>
.big {
  margin: 0 auto;
  height: 80px;
  width: 500px;
  margin-top: 25px;
}
.one {
  float: left;
  padding-right: 30px;
  border-right: 1px solid rgb(227, 228, 229);
}
.two {
  float: left;
  padding-left: 30px;
  padding-right: 30px;
  border-right: 1px solid rgb(227, 228, 229);
}
.three {
  float: left;
  padding-left: 30px;
  padding-right: 30px;
  border-right: 1px solid rgb(227, 228, 229);
}
.four {
  float: left;
  padding-left: 30px;
}
p {
  font-size: 24px;
  text-align: center;
  color: rgb(44, 23, 198);
  line-height: 10px;
}
.head {
  background-color: rgb(240, 242, 245);
}
.time {
  font-size: 18px;
  color: rgb(45, 129, 193);
  float: left;
  margin-top: 40px;
}
.huanyin {
  color: #000;
}
</style>
